<template>
    <div class="w-full h-2/3  m-auto;">
        <div class=" bg-slate-50 dark:bg-zinc-600  w-2/3 m-auto h-full">
            <div class="h-full overflow-y-scroll overflow-x-hidden w-full ">
                <div v-for="(message, index) in messages" :key="index" class="flex"
                    :class="{ 'justify-end': message.sender === 'me', 'justify-start': message.sender === 'other' }">
                    <span
                        :class="{ 'my-message ': message.sender === 'me', 'other-message': message.sender === 'other' }">{{
                            message.content }}</span>
                </div>
            </div>
            <div class=" w-full  mt-0  m-auto flex space-x-2 " style="height: 50px;">
                <div class="flex-1">
                    <el-input type="textarea" rows="4" placeholder="type your message" v-model="newMessage"></el-input>
                </div>
                <div>
                    <el-button @click="sendMessage" type="primary">发送</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ElMessage, ElLoading, ElNotification } from "element-plus";
import { h, ref, nextTick } from 'vue'
import axios from 'axios'
let chatPattern = ref('bot')
let checked = ref([])
const scrollToBottom = () => {
    nextTick(() => {
        let container = document.querySelector('.overflow-y-scroll');
        container.scrollTop = container.scrollHeight;
    })
}

nextTick(() => {
    scrollToBottom()

})

let messages = ref([
])
let newMessage = ref('');
let currentUser = ref('me') // 当前用户，可设为 'me' 或 'other'
const queryDialog = () => {
    let user_inputs = []
    let ai_outputs = []
    messages.value.forEach(item => {
        if (item.sender === 'me') {
            user_inputs.push(item.content)
        } else {
            ai_outputs.push(item.content)
        }
    })
    return { 'user_inputs': user_inputs, 'ai': ai_outputs }
}

const sendMessage = () => {
    if (newMessage.value === '') {
        ElMessage.error('消息不能为空')
        return
    }
    messages.value.push({ sender: 'me', content: newMessage.value })
    scrollToBottom()
    axios.post('http://localhost:8000/videos/ai_chat', { "new_message": newMessage.value }).then(res => {
        let resp = res.data
        if (resp.code === 200) {

            messages.value.push({ sender: 'other', content: resp.data })
            scrollToBottom()
        }
    })
    newMessage.value = ''

}

</script>

<style>
.chat-container {
    display: flex;
    flex-direction: column;
    height: 80vh;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
}

.my-message {
    align-self: flex-end;
    justify-content: flex-end;
    background-color: #dcf8c6;
    color: #333;
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
}

.other-message {
    align-self: flex-start;
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
}

.chat-input {}

input[type="text"] {
    flex-grow: 1;
    padding: 5px;
    margin-right: 10px;
}

button {
    padding: 5px 10px;
}
</style>
